<template>
  <!-- 好生活资金池-详情-支付订单-->
  <div class="payListDetail">
    <brokerInfo :infos="info"></brokerInfo>
    <tableList
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :hasSera="true"
    ></tableList>
    <p>支付记录</p>
    <tableList
      :tableData="payTableData"
      :tableInfos="payTableInfos"
      :tableFormatter="payTableFormatter"
      :hasSera="true"
    ></tableList>
  </div>
</template>

<script type="text/ecmascript-6">
import brokerInfo from "./brokerInfo";
import tableList from "../../common/tableList";
import utils from "@/common/utils.js";
import api from "@/api/apiPath";
export default {
  components: {
    brokerInfo,
    tableList
  },
  data() {
    return {
      tableData: [],
      firstFlag:true,
      tableInfos: [
        { label: "支付订单号", prop: "orderCode" },
        { label: "订单交易状态", prop: "orderStatus" },
        { label: "订单创建时间", prop: "createTime" },
        { label: "应付金额（元）", prop: "pay" },
        { label: "已付款金额（元）", prop: "paid" },
        { label: "待付款金额（元）", prop: "paying" }
      ],
      payTableData: [],
      payTableInfos: [
        { label: "支付时间", prop: "payTime" },
        { label: "支付方式", prop: "payTypeName" },
        { label: "支付金额（元）", prop: "payOnThisTime" },
        { label: "交易流水号", prop: "serialNumber" }
      ],
      orderStatusArray: {
        0:"已下单",
        1:"认筹-已付款",
        2:"已签约",
        3:"认筹-已退款",
        4:"认筹-退款中",
        5:"退款失败",
        9:"已删除",
      },
      customerSourceArray: {
        "0":"经纪人录入",
        "1":"运营录入",
        "2":"扫码录入",
        "3":"购房者注册",
        "4":"推荐注册",
        "5":"公众号注册",
        "6":"网络推客录入",
        "7":"微楼盘注册",
        "8":"APP下单",
        "9":"预约看房",
        "11":"网络推客-集团小程序",
        "13":"认购录入"
      },
      info: {}
    };
  },
  created() {
    this.searchList();
  },
  mounted() {},
  methods: {
    tableFormatter(prop, val) {
      let moneyFormatter = ["pay", "paid", "paying"];
      if (moneyFormatter.includes(prop)) {
        return  this.formatMoney(val);
      }
      let propMap = {
        orderStatus: this.orderStatusArray
      };
     
      return propMap[prop] ? propMap[prop][val] : val;
    },
    payTableFormatter(prop, val) {
      if (prop == "payOnThisTime") {
        return this.formatMoney(val);
      }
      if(prop == "payTime"){
        return utils.getTimeString(+val)
      }
      return val;
    },
    getUserInfo(i) {
      this.info = {
        客户姓名: i.customerName,
        电话: utils.formatPhoneNumber(i.customerPhone),
        客户来源: this.customerSourceArray[i.customerSource],
        楼盘: i.devName,
        房款:  this.formatMoney(i.housePrise) ,
        成交价:  this.formatMoney(i.actualPayment) ,
        房间号: i.cellName,
        "前佣总额（元）":this.formatMoney(i.frontBrokerageTotal)
        
      };
    },
    formatMoney(val){
      return  val? utils.formatMoney(val)+"元": "0.00 元"
    },
    searchList() {
      if(!this.userInfo.mergeId){
        return ;
      }
      this.axios
        .get(api.getCashPoolPayList + "/" + this.userInfo.mergeId)
        .then(res => {
          if (res.data.code == 200) {
            this.firstFlag = false;
            this.payTableData = res.data.data.orderLogs;
            this.tableData = [res.data.data.corder];
          }
        });
    }
  },
  props: ["userInfo", "active"],
  watch: {
    active(val) {
     if(this.firstFlag && val){
      this.searchList();
    }
    },
    allInfo(val) {
      this.getUserInfo(val);
    }
  },
  computed: {
    allInfo() {
      return this.userInfo.allInfo;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
